/* 左侧缩略图导航栏 - 主样式 */
.thumbnail-pane {
    /* 柔和背景：米白色，护眼且不刺眼 */
    -fx-background-color: #f8f9fa;
    /* 精致边框：右侧细灰线，分隔更自然 */
    -fx-border-color: #dee2e6;
    -fx-border-width: 0 1px 0 0;
    /* 内边距：上下留空，左右紧凑 */
    -fx-padding: 3px 1px;
    /* 圆角：轻微圆角，增加柔和感 */
    -fx-background-radius: 0 4px 4px 0;
}

/* 列表项基础样式 - 统一布局 */
.thumbnail-pane .list-cell {
    -fx-pref-height: 180px; /* 充足高度，避免缩略图拥挤 */
    -fx-padding: 3px 3px; /* 上下间距稍大，呼吸感更好 */
    -fx-alignment: center; /* 缩略图居中显示 */
    -fx-background-color: transparent; /* 默认透明背景 */
}


/* 选中项 - 渐变高亮（核心质感） */
.thumbnail-pane .list-cell:filled:selected {
    /* 蓝紫渐变背景，高级感拉满 */
    -fx-background-color: linear-gradient(to right, #e8f4fd, #f0f5ff);
    -fx-background-radius: 8px;
    /* 深色边框，突出选中状态 */
    -fx-border-color: #4299e1;
    -fx-border-width: 2px;
    -fx-border-radius: 6px;
    /* 选中阴影，增强层次感 */
    -fx-effect: dropshadow(gaussian, rgba(66, 153, 225, 0.2), 8, 0.2, 0, 3);
}

/* 缩略图容器样式 */
.thumbnail-pane .list-cell .image-view {
    -fx-fit-width: 205px; /* 略宽，填充选中框 */
    -fx-fit-height: 155px;
    -fx-preserve-ratio: true;
    /* 立体阴影，模拟卡片效果 */
    -fx-effect: dropshadow(gaussian, rgba(0,0,0,0.1), 10, 0.15, 0, 4);
}

/* 滚动条优化 - 隐形风格（不占用视觉空间） */
.thumbnail-pane .scroll-bar:vertical {
    -fx-pref-width: 6px; /* 超窄滚动条 */
    -fx-opacity: 0.7; /* 半透明，不突兀 */
}

/* 滚动条轨道 - 透明 */
.thumbnail-pane .scroll-bar:vertical .track {
    -fx-background-color: transparent;
}

/* 滚动条滑块 - 圆角深色 */
.thumbnail-pane .scroll-bar:vertical .thumb {
    -fx-background-color: #adb5bd;
    -fx-background-radius: 3px; /* 完全圆角，更精致 */
    -fx-background-insets: 0;
}

/* 滚动条滑块 hover - 加深颜色 */
.thumbnail-pane .scroll-bar:vertical .thumb:hover {
    -fx-background-color: #868e96;
}

/* 列表为空时的提示样式（可选，增强体验） */
.thumbnail-pane .list-cell:empty {
    -fx-text-fill: #6c757d;
    -fx-font-size: 14px;
    -fx-graphic: null;
}